[Разбор] Разбор проекта. лендинг концерта Григория Юрченко

🧭 Общая информация

Тип проекта: одностраничный промо-лендинг
Технологии:

• HTML5

• CSS3 (адаптивная вёрстка, анимации)

• Vanilla JavaScript

• Font Awesome (иконки)

Назначение:
Информационная и коммерческая страница для продвижения сольного концерта артиста с возможностью перехода к покупке билетов, таймером до события и социальными ссылками.

🎯 Цели проекта

Проект решает сразу несколько задач:

1. Визуальное вовлечение
   Афиша, анимации, плавные появления элементов.

2. Чёткая навигация
   Быстрый доступ к ключевой информации: концерт, артист, билеты.

3. Конверсия
   Яркая CTA-кнопка «Купить билеты».

4. Адаптация под мобильные устройства

5. Минимальная зависимость от внешних библиотек

🧱 Архитектура страницы

Проект реализован как монолитный single-file лендинг, что оправдано для:

• простоты деплоя

• высокой скорости загрузки

• отсутствия сборки

Структурно страница делится на:

• <header> — навигация

• Hero-блок (афиша + кнопка)

• Контентные секции:

  • «О концерте»

  • «Обо мне»

  • «Билеты»

• Countdown-таймер

• Социальные ссылки

• <footer>

🧭 Навигация и UX

Фиксированная шапка

• Навигация закреплена (position: fixed)

• Прозрачный фон с затемнением

• Подсветка активного пункта при скролле

📌 Используется scroll-spy логика — активная ссылка меняется в зависимости от текущей секции.

Бургер-меню (mobile)

Для экранов <700px:

• навигация уезжает вправо

• появляется burger-кнопка

• добавлены aria-* атрибуты

Это делает меню:

• доступным (a11y)

• удобным для тач-устройств

🖼️ Работа с изображениями

Адаптивная афиша

Используется два изображения:

• pc.webp — для десктопа

• mobile.webp — для смартфонов

Переключение реализовано через CSS, а не JS:

.poster-pc { display: block }
.poster-mobile { display: none }

@media (max-width: 700px) {
  .poster-pc { display: none }
  .poster-mobile { display: block }
}

📌 Это:

• быстрее

• надёжнее

• не требует логики в JS

🎞️ Анимации появления (Reveal on Scroll)

Большинство элементов:

• изначально скрыты (opacity: 0)

• слегка смещены

• появляются при прокрутке

Принцип работы

1. JS отслеживает позицию скролла

2. Если элемент попадает в viewport → добавляется класс .visible

3. CSS делает плавный transition

📌 Это классический, проверенный паттерн, не перегружающий браузер.

⏱️ Таймер обратного отсчёта

Назначение

• создаёт ощущение срочности

• удерживает внимание пользователя

• усиливает конверсию

Логика

• используется фиксированная дата события (UTC)

• расчёт дней / часов / минут / секунд

• обновление раз в секунду (setInterval)

При достижении нуля:

• таймер останавливается

• выводится статус «Событие уже в разгаре!»

📌 Код защищён проверками на null, что снижает риск ошибок.

🔘 CTA-кнопка «Купить билеты»

Кнопка:

• визуально выделена

• имеет hover / active-состояния

• ведёт на внешний билетный сервис

• использует rel="noopener noreferrer"

📌 Это хорошая практика безопасности при открытии внешних ссылок.

👤 Контентные секции

«О концерте»

• подробное описание концепции

• список участников оркестра

• эмоциональный, но структурированный текст

«Обо мне»

• краткий профессиональный бэкграунд

• акцент на личности артиста

• доверительный тон

«Билеты»

• чёткое разделение категорий

• полезная информация для гостей

• снижает количество вопросов перед покупкой

🌐 Социальные ссылки

Реализованы как:

• иконки Font Awesome

• SVG для нестандартных сервисов

• горизонтальный скролл на мобильных

📌 Это позволяет разместить много платформ, не ломая верстку.

♿ Доступность (Accessibility)

В проекте присутствуют:

• aria-label

• aria-expanded

• навигация с клавиатуры (Space / Enter)

• корректные alt у изображений

Это выше среднего уровня для лендингов подобного типа.

⚙️ Производительность

Плюсы:

• нет тяжёлых библиотек

• минимум JS

• CSS-анимации вместо JS-анимаций

• WebP-изображения

Потенциальные улучшения:

• вынести CSS и JS в отдельные файлы

• добавить loading="lazy" для изображений

• подключать Font Awesome локально

🧠 Общая оценка архитектуры

Сильные стороны

• чистый Vanilla JS

• хорошая адаптивность

• продуманный UX

• аккуратная работа с анимациями

• фокус на конверсию

Ограничения

• monolithic HTML

• нет сборки / модульности

• сложно масштабировать под SPA

📌 Но для целей проекта это осознанный и правильный компромисс.

🏁 Итог

Этот проект — пример грамотно сделанного промо-лендинга:

• без лишней сложности

• с хорошим визуалом

• с вниманием к деталям

• с правильным балансом дизайна и кода

Он отлично подойдёт:

• для реального использования

• как портфолио-работа

• как пример «чистого» фронтенда без фреймворков